// 尝试发送请求，获取统计数据
axios.get('/dashboard',).then(({data:res}) => {
  // console.log(res);
  // 解构赋值方案1
  // let {message,data:{ groupData,overview}} = res;
  // console.log(overview);
  // 解构赋值方案2
  let { overview,year,salaryData,groupData,provinceData} = res.data
  // console.log(overview);
  // 设置最上面的概览区的数据
  // document.querySelector('[name:salary]').innerHTML = overview.salary
  // document.querySelector('[name:student_count]').innerHTML = overview.student_count
  // document.querySelector('[name:age]').innerHTML = overview.age
  // document.querySelector('[name:group_count]').innerHTML = overview.group_count
  for(let key in overview) {
    document.querySelector(`[name:${key}]`).innerHTML = overview[key]
  }
})




// ------------------------ 发送请求，获取首页需要的统计数据 -------------------
axios.get('/dashboard').then(({ data: res }) => {
  // console.log(res) // { message: 'xxx', data: { groupData, overview, .... } }
  // let {data: { groupData, overview, provinceData, salaryData, year }} = res
  // console.log(res.data) // { overview:xx, year: xx, salaryData: yy, }
  let { groupData, overview, provinceData, salaryData, year } = res.data
  // console.log(overview) // 开头的 概览数据 {salary: 16778, student_count: 80, age: 24, group_count: 8}
  for (let key in overview) {
    document.querySelector(`[name=${key}]`).innerHTML = overview[key];
  }
  // 获取到接口数据之后，然后在调用图表函数，并且将数据传递给图表函数
  lineCharts(year)// 把year传递给折线图
  classSalaryChart(salaryData) // 把 groupData 传递给柱状图
  GroupChart(groupData)// 传递给饼图
  genderSalaryChart(salaryData)// 传递给饼图
  mapChart(provinceData)//把 provinceData 传递给地图
})


// -------------1.折线图：全学科薪资走势--------
// 1.的有盒子（页面布局已经有了 ，id:line）
// 2.引入echarts.min.js文件（已引入）
function lineCharts(data) {
  // console.log(data);
    // let symbol = {
    //     value:5000,
    //     symbolSize:15,
    //     symbol:'triangle',
    // }
    // 3.初始化echarts
    let myCharts =echarts.init(document.querySelector('#line'))
    // 4.配置项
    let option = {
        // 标题配置
        title:{
            // 标题文本
            text:'2022全学科薪资走势',
            // 颜色 文字大小
            textStyle:{
                // color:'',
                fontSize:16
            },
            // 位置
            left:10,
            top:15
        },
        xAxis: {
          type: 'category',
          // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          data:data.map(item => item.month),
          //   X轴上的文本
          axisLabel:{
            color:'#999'
          },
        //   轴线
        axisLine:{
            lineStyle:{
                color:'#ccc',
                type:'dashed'
            }
        }
        },
        yAxis: {
          type: 'value',
          //Y轴分割线
          splitLine:{
            lineStyle :{
                type:'dashed'
            }
          },
        },
        // 鼠标移入提示
        tooltip: {
            // trigger: 'item', // 鼠标放到具体的小点上，会提示
            trigger: 'axis' // 表示鼠标放到轴上即可触发
        },
        //   网格
        grid:{
              top :'20%'  
        },
        // 颜色设置
        // color :['颜色1','颜色2'],
        color:{
            // 渐变的类型，linear表示线性渐变
            type: 'linear',
            // 坐标
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
                {
                offset: 0, color: '#499FEE' // 0% 处的颜色
                }, 
                {
                offset: 1, color: '#5D75F0' // 100% 处的颜色
                }],
            global: false // 缺省为 false
        },
        series: [
          {
            // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
            data:data.map(item => item.salary),
            type: 'line',
            // 平滑曲线
            smooth: true,
            // 线条样式
            lineStyle:{
                width:6
            },
            // 线条上的标记大小
            symbolSize:10,
            // 区域样式
            areaStyle: {
                color:{
                     // 渐变的类型，linear表示线性渐变
                    type: 'linear',
                    // 坐标
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                        offset: 0, color: '#499FEE' // 0% 处的颜色
                        }, 
                        {
                        offset: 0.8, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
                            },
                        {
                        offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                        }],
                    global: false // 缺省为 false
                }
            }
          }
        ]
      };
    // 5.创建图表
    myCharts.setOption(option)
}





// ----------2.饼图:班级薪资分布（右上角）----------
function classSalaryChart(data){
  // console.log(data);
    let myCharts = echarts.init(document.querySelector('#salary'))
    let option ={
        // 标题配置
        title:{
            // 标题文本
            text:'班级薪资分布',
            // 颜色 文字大小
            textStyle:{
                // color:'',
                fontSize:16
            },
            // 位置
            left:10,
            top:15
        },
        // 鼠标移入的提示
        tooltip: {
          trigger: 'item'
        },
        // 图例
        legend: {
          bottom: '6%',
          left: 'center'
        },
        color:  ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        series: [
          {
            name: '班级薪资分布',
            // pie表示饼图
            type: 'pie',
            // 中心点坐标
            center:['50%','50%'],
            // 内外圈的半径
            radius: ['50%', '64%'],
            // avoidLabelOverlap: false,
            // 每个扇形区域的样式
            itemStyle: {
              // 圆角
              borderRadius: 10,
              //边框颜色
              borderColor: '#fff',
              //边框大小
              borderWidth: 2
            },
            // 文字
            label: {
              // 每个扇形的描述文字是否显示，show: false表示不显示
              show: false,
              // position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold'
            //   }
            // },
            // 标签文字视觉引导线
            labelLine: {
              show: false
            },
            // data: [
            //   { value: 1048, name: '1万以下' },
            //   { value: 235, name: '1-1.5万' },
            //   { value: 580, name: '1.5-2万' },
            //   { value: 484, name: '2万以上' },
            // ]
            data:data.map(item => {
              return ({ value: item.g_count + item.b_count, name: item.label })
            })
          }
        ]
      };
    myCharts.setOption(option)
}



// 3.柱状图
function GroupChart(data) {
    // console.log(data);
    let myCharts = echarts.init(document.querySelector('#lines'));
    let option = {
        // 网格
        gridm:{
            left :70,
            top :30,
            right :30,
            bottom :50
        },
        xAxis: {
            type: 'category',
            // data:['张三', '李四', '赵云', '张飞', '马超', '黄忠', '亚索', '盲僧'],
            data:data[1].map(item => item.name),
            // 轴线颜色
            axisLine: {
                lineStyle: {
                  color: '#ccc',
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#999'
              }
        },
        yAxis: {
            type: 'value',
            splitLine:{
                lineStyle:{
                    type:'dashed'
                }
            }
        },
        // 鼠标移入有提示
        tooltip:{
            trigger:'axis'
        },
        series: [
            {
                // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
                data:data[1].map(item => item.hope_salary),
                type: 'bar',
                name:'期望薪资',
            },
            {
                // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
                data:data[1].map(item => item.salary),
                type: 'bar',
                name:'就业薪资'
            }
        ],
        color:[{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#34D39A' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        ]
        };
    myCharts.setOption(option)

    // 找到8个按钮外的盒子，注册事件
    document.querySelector('#btns').addEventListener('click',function(e){
      if (e.target.tagName === 'BUTTON') {
        // 说明点击了某个按钮
        let i = e.target.innerHTML;
        console.log(i);
        // 排他思想
        document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
        e.target.classList.add('btn-blue')
        // 更换图表中的数据（点击的是第几组，图表中应该战术该组的数据）
        option.xAxis.data = data[i].map(item => item.name)
        option.series[0].data = data[i].map(item => item.hope_salary)
        option.series[1].data = data[i].map(item => item.salary)
        // 修改了配置项后，重新创建图标
        myCharts.setOption(option)

        }
      }
    )

}




// -----------4.饼图：男女薪资分布（左下角饼图）
function genderSalaryChart(data){
    let mychart = echarts.init(document.querySelector('#gender'));
    let option = {
         // 标题配置
         title:[
            {
                text:'男女薪资分布',
                top: 10,
                left: 10,
                textStyle: {
                    fontSize: 16
                }
            },
            {
                text:'男生',
                top: '45%',
                left: '45%',
                textStyle: {
                    fontSize: 12
                }
            },
            {
                text:'女生',
                top: '85%',
                left: '45%',
                textStyle: {
                    fontSize: 12
                }
            }
         ],
        tooltip: {
          trigger: 'item'
        },
        color:['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        series: [
          {
            name: '男生薪资分布',
            type: 'pie',
            radius: ['20%', '30%'],
            center:['50%','30%'],
            // data: [
            //   { value: 15, name: '1万以下' },
            //   { value: 235, name: '1万-2万' },
            //   { value: 580, name: '1.5万-2万' },
            // ]
            data:data.map(item => {
              return ({ value: item.b_count, name: item.label })
            })
          },
          {
            name: '女生薪资分布',
            type: 'pie',
            radius: ['20%', '30%'],
            center:['50%','70%'],
            // data: [
            //   { value: 1048, name: '1万以下' },
            //   { value: 235, name: '1万-2万' },
            //   { value: 580, name: '1.5万-2万' },
            // ]
            data:data.map(item => {
              return ({ value: item.g_count , name: item.label })
            })
          }
        ],
      };
    mychart.setOption(option)
}


// // -----------------5.地图：籍贯分布----------------
function mapChart(data) {
  // console.log(data);
    let mychart = echarts.init(document.querySelector('#map'));
    const mapData = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 }
      ];
      mapData.forEach(item => {//item是小对象
        let res = data.find(v => {
            //return '条件'
            return v.name.includes(item.name) 
        })
        // console.log(res);
        if (res) {
            item.value = res.value
        }
      })
    let option = {
       
        // 标题配置
        title:{
            // 标题文本
            text:'籍贯分布',
            // 颜色 文字大小
            textStyle:{
                // color:'',
                fontSize:16
            },
            // 位置
            left:10,
            top:15
        },
        // 系列数据必须有
        series:[{
            // 系列数据名（name）：籍贯分布
            name:'籍贯分布',
            // 表示图标的类型是地图
            type:'map',
            // china表示中国地图
            map: 'china',
            // 默认的每个省的样式
            label: {
                show: true,
                fontSize: 10,
                color:'rgba(0,0,0,0.7)'
            },
            itemStyle:{
                areaColor:'#E0FFFF',
                borderColor :'rgba(0, 0, 0, 0.2)'
            },
            emphasis:{
                itemStyle:{
                    // 每个省的颜色
                    areaColor:'#34D39A',
                    // 去掉边框
                    borderWidth:0,
                    shadowBlur:20,
                    shadowOffsetX: 0 ,
                    shadowOffsetY: 0 ,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }              
            },
            // 每个区域的数据
            data:mapData
        }
        ],
         // 视觉映射
         visualMap:{
            type: 'continuous',
            min: 0,
            max: 6,
            text: [6, 0],
            left: 40,
            bottom: 20,
            inRange: {
                color:['#fff','#0075F0']
            }
        },
        // 鼠标移入提示
        tooltip: {
          formatter: '{b}：{c}位学员', // {a}是series里面大的name；{b}表示每个区域的名字(省的名字)；{c}表示该地区的值
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent',
          textStyle: {
            color: '#fff'
          }
        }
    }
    mychart.setOption(option)
}




